<template>
  <div class="b-message" v-if="visible" :class="`b-message-${this.type}`">
    <i class="b-messgae-icon iconfont" :class="`icon${this.type}`"></i>
    <p class="b-message-content">{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'BMessage',
  data() {
    return {
      visible: false,
      type: '',
      message: '',
      duration: 2000,
      timer: null
    }
  },
  mounted () {
    this.visible = true
    this.timer = setTimeout(() => {
      this.visible = false
    }, this.duration)
  },
  destroyed () {
    this.timer = null
  }
}
</script>

<style scoped lang='less'>
</style>